<template>
  <div class="AnalysisMentor item5">
    <!-- 门诊申请情况分析 -->
    <section class="layer">
      <div class="box">
        <div class="box-header">
          <span class="box-title">查询条件</span>
        </div>
        <div class="box-body">
          <el-form ref="searchForm" :model="searchForm" label-width="80px">
            <el-row :gutter="12">
              <el-col :md="16" :lg="16" :xl="12">
                <el-form-item label="时间区间" prop="priceTime">
                  <price-time ref="priceTime" :show-default-date="true" :show-btn-select="true" @change="priceTimeChange" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="12">
              <el-col :md="8" :lg="8" :xl="8">
                <el-form-item label="待遇类型" prop="opspTrtCode">
                  <el-select
                    v-model="searchForm.opspTrtCode"
                    clearable
                    placeholder="请选择"
                    allow-create
                    style="width:100%"
                  >
                    <el-option
                      v-for="item in opspTrtData"
                      :key="item.opspTrtCode"
                      :label="item.opspTrtName"
                      :value="item.opspTrtCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :md="16" :lg="16" :xl="16">
                <el-button
                  type="primary"
                  plain
                  size="small"
                  @click="search"
                >查询</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div />
      </div>
    </section>
    <section class="layer ts">
      <el-row :gutter="12">
        <el-col :span="12">
          <div class="box">
            <div class="box-header handle">
              <span class="box-title">门特待遇单位类型对比</span>
            </div>
            <div class="box-body">
              <special-treatment-units v-loading="chartLoading1" :axis-data="unitAxisData" :series-data="unitSeriesData" />
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="box">
            <div class="box-header handle">
              <span class="box-title">门特待遇人群类型对比</span>
            </div>
            <div class="box-body">
              <special-treatment-person v-loading="chartLoading2" :axis-data="personAxisData" :series-data="personSeriesData" />
            </div>
          </div>
        </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
require('echarts/theme/macarons') // echarts theme
import PriceTime from '../components/PriceTime'
import SpecialTreatmentUnits from './components/special-treatment-units'
import SpecialTreatmentPerson from './components/special-treatment-person'
import { companytypeGetAll, persontypeGetAll, treatmentGetAll } from '@/api/assist-decision/analysisMentor'

export default {
  name: 'AnalysisMentor',
  components: {
    'price-time': PriceTime,
    'special-treatment-units': SpecialTreatmentUnits, // 门特待遇单位类型柱状图
    'special-treatment-person': SpecialTreatmentPerson// 门特待遇人群类型柱状图
  },
  data() {
    return {
      chartLoading1: false,
      chartLoading2: false,
      searchForm: {
        beginDate: null,
        endDate: null, // 时间区间
        opspTrtName: null, // 待遇类型
        opspTrtCode: null

      },
      opspTrtData: [],
      unitAxisData: [],
      unitSeriesData: [],
      personAxisData: [],
      personSeriesData: []
    }
  },
  mounted: function() {
    this.getAllData()
  },

  methods: {
    priceTimeChange(v) {
      this.searchForm.beginDate = v[0] || null
      this.searchForm.endDate = v[1] || null
    },

    restSearch(formName) {
      this.$refs.priceTime.reset() // 子组件重置
      this.$refs[formName].resetFields()
      this.unitAxisData = []
      this.unitSeriesData = []
      this.personAxisData = []
      this.personSeriesData = []
    },

    search() {
      this.opspTrtData.forEach(item => {
        if (item.opspTrtCode === this.searchForm.opspTrtCode) {
          this.searchForm.opspTrtName = item.opspTrtName
        }
      })
      const data = {
        beginDate: this.searchForm.beginDate,
        endDate: this.searchForm.endDate,
        opspTrtCode: this.searchForm.opspTrtCode,
        opspTrtName: this.searchForm.opspTrtName
      }
      this.chartLoading1 = true
      this.chartLoading2 = true
      Promise.all([companytypeGetAll(data), persontypeGetAll(data)]).then(res => {
        this.personAxisData = res[0].data.map(item => {
          return item.psnType
        })
        this.personSeriesData = res[0].data.map(item => {
          return { name: item.psnType, value: item.psnCount }
        })
        console.log(this.frequencySeriesData)
        this.unitAxisData = res[1].data.map(item => {
          return item.lv3PsnType
        })
        this.unitSeriesData = res[1].data.map(item => {
          return { name: item.lv3PsnType, value: item.psnCount }
        })
        this.chartLoading1 = false
        this.chartLoading2 = false
      }).catch(() => {
        this.chartLoading1 = false
        this.chartLoading2 = false
      })
    },
    // 调用业务代码接口类获取待遇类型数据
    getAllData() {
      treatmentGetAll({}).then(res => {
        this.opspTrtData = res.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
 section:first-child  .el-row:last-child .el-col:last-child{
        text-align: right;
        font-size: 0;
    }
</style>
